<script setup lang="ts">
import { useDark } from "@vueuse/core";
import { ref } from "vue";
import { Switch } from "ant-design-vue";
import { useLayoutConfigStore } from "@/stores/layoutConfig";
import { Icon } from '@iconify/vue';

const layoutConfig = useLayoutConfigStore();
// 暗黑模式切换: 会将状态值自动保存到localStorage中：`vueuse-color-scheme: dark|auto`
// 会自动监听isDark值的变化，来切换到对应主题
const isDark = useDark({
  initialValue: "dark", // 初始主题
});
// 切换暗黑模式，更新状态值
const changeDark = (_isDark: any) => {
  layoutConfig.isDark = _isDark;
};
</script>
<template>
  <div>具有自动数据持久性的响应式暗黑模式</div>
  <div class="flex items-center">
    <Switch v-model:checked="isDark" @change="changeDark">
      <template #checkedChildren>
        <!-- <SvgIcon name="ant-AlertOutlined" /> -->
        <Icon icon="radix-icons:sun" />
      </template>
      <template #unCheckedChildren>
        <Icon icon="radix-icons:moon" />
      </template>
    </Switch>
  </div>
</template>
<style scoped lang="less"></style>
